<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/editor/css/editormd.min.css">
    <script src="/editor/lib/marked.min.js"></script>
    <script src="/editor/lib/raphael.min.js"></script>
    <script src="/editor/lib/underscore.min.js"></script>
    <script src="/editor/lib/sequence-diagram.min.js"></script>
    <script src="/editor/lib/flowchart.min.js"></script>
    <script src="/editor/lib/jquery.flowchart.min.js"></script>
    <script src="/editor/editormd.min.js"></script>
    <script src="/js/lib/clipboard.min.js"></script>
    <link rel="stylesheet" href="/js/prettify/skins/sunburst.css">
    <title></title>
    <script src="/js/submit_button.js"></script>
    <style>
        .ui.fluid.container {
            max-width: 85% !important;
        }
    </style>

</head>
<body>
<main class="ui container fluid" id="contest-content">
    <div v-if="attend">
        <div class="ui segment content">
            <h1 class=" ui center aligned header">{{contest.title}}</h1>
            <a :href="'/contest/edit/'+cid" class="ui button" v-if="creator">Update更新比赛</a>
            <p class="ui description">{{contest.description}}</p>
        </div>
        <header-tab loc="problem" v-bind:cid="contest.id"></header-tab>
        <div class="ui grid two column row">
            <div class="ui four wide column">
                <div class="ui segments">
                    <div class="ui padded segment" v-if="!contest.ended">
                        <h2 class="ui center aligned header"><i class="ui stopwatch icon"></i>{{timeLeft}}</h2>
                        <div class="ui attached top indicating progress" id="time-pogress" data-percent="0">
                            <div class="bar"></div>
                        </div>
                    </div>
                    <div class="ui padded segment">
                        <div class="ui pointing vertical menu fluid">
                            <div class="link item" v-for="p in contest.problems" :class="{active:p.tempId==pid}"
                                 @click="change_problem(p.tempId)">
                                {{p.tempId}} {{p.tempTitle}}
                                <div class="ui left pointing orange label">
                                    {{p.accepted}}/{{p.submitted}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui container twelve wide column">
                <div class="ui raised piled segments fluid">
                    <div class="ui secondary center aligned segment" v-bind:class="{loading:!dataready}">
                        <h1>{{problem.tempId}} {{problem.tempTitle}}</h1>
                        <table class="ui center aligned table">
                            <tr>
                                <td><i class="fa fa-clock-o"></i>时间限制</td>
                                <td>{{problem.problem.timeLimit}}</td>
                                <td><i class="fa fa-database"></i>空间限制</td>
                                <td>{{problem.problem.memoryLimit}}B</td>
                            </tr>
                        </table>
                    </div>
                    <div class="ui segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">题目描述</h2>
                        <div class=" md-text" id="problem-description">
                            <textarea style="display: none" v-html="problem.problem.description"></textarea>
                        </div>
                    </div>
                    <div class="ui segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">输入</h2>
                        <div class=" md-text" id="problem-input">
                            <textarea style="display: none;" v-html="problem.problem.input"></textarea>
                        </div>
                    </div>
                    <div class="ui segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">输出</h2>
                        <div class=" md-text" id="problem-output">
                            <textarea style="display: none;" v-html="problem.problem.output"></textarea>
                        </div>
                    </div>
                    <div class="ui segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">样例输入
                            <button class="ui small button btn-copy"
                                    data-clipboard-target="#input-content" data-clipboard-action="copy">Copy
                            </button>
                        </h2>
                        <pre class="" id="input-content" v-html="problem.problem.sampleInput"></pre>
                    </div>
                    <div class="ui segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">样例输出
                            <button class="ui button small btn-copy"
                                    data-clipboard-target="#output-content" data-clipboard-action="copy">Copy
                            </button>
                        </h2>
                        <pre class="" id="output-content" v-html="problem.problem.sampleOutput"></pre>
                    </div>
                    <div class="ui tertiary segment" v-bind:class="{loading:!dataready}">
                        <h2 class="">提示</h2>
                        <div class="md-text" id="problem-hint">
                            <textarea style="display: none;" v-html="problem.problem.hint"></textarea>
                        </div>
                    </div>
                </div>
                <div class="ui fluid segment">
                    <form id="form" class="ui form">
                        <label for="language">语言 :</label>
                        <select class="ui search dropdown" id="language" name="language" v-model="language"
                                v-on:change="change_lang()">
                            <option value="c">C</option>
                            <option selected value="cpp">C++</option>
                            <option value="java">Java</option>
                            <option value="py2">Python2</option>
                            <option value="py3">Python3</option>
                            <option value="go">Golang</option>
                        </select>
                        <div class="ui checked  checkbox">
                            <label for="share">分享代码</label>
                            <input id="share" name="share" v-model="share" type="checkbox">
                        </div>
                        <div class="field" id="code-editor">
                            <textarea style="display:none;"></textarea>
                        </div>
                        <submit-button v-on:submit="submit"></submit-button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <form class="ui input" v-if="!attend" v-on:submit.prevent="check_password()">
        <label for="cpw" class="ui right pointing red basic label">输入比赛密码</label>
        <input type="password" id="cpw" v-model="password" placeholder="密码">
        <submit-button v-on:submit="check_password"></submit-button>
    </form>
</main>
<script>
    $('.ui.checkbox').checkbox();
    var cid = location.pathname.split('/');
    cid = cid[cid.length - 1];
    var clipboard = new ClipboardJS('.btn-copy');
    clipboard.on('success', function (e) {
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>
<script src="/js/contestinfo.js"></script>
<script src="/js/contesttab.js"></script>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>